import React, { Component } from 'react'
import { Grid, List } from 'antd-mobile';

class AvatarSelect extends Component {
  render() {
    const avatarList = 'boy,girl,man,woman,bull,chick,crab,hedgehog,hippopotamus,koala,lemur,pig,tiger,whale,zebra'
    const data = avatarList.split(',').map((v) => ({
      icon: require(`../../static/img/${v}.png`),
      text: v.length > 7 ? `${v.substr(0, 6)}...` : v,
    }));
    const gridHeader = this.state&&this.state.icon ? 
      <div><img style={{ width: '32px', height: '32px', display: 'block', marginLeft: '10px'}} src={this.state.icon}  alt='' /></div> 
      :
      <div style={{width:'32px',height:'32px',fontSize:'12px',marginLeft:'10px'}}>请选头像</div>
    return (
      <List
        renderHeader={gridHeader}
      >
        <Grid
          data={data}
          activeStyle={false}
          columnNum={5}
          onClick={(ele, index) => {
              this.props.onClick(ele, index)
              this.setState({
                icon: ele.icon
              })
            }
          }
        ></Grid>
      </List>
    )
  }
}

export default AvatarSelect